import React, { useState } from "react";
import { Form, Button, Input, Radio, Toast } from "antd-mobile/2x";
// import { ImageUploadItem } from "antd-mobile/es/components/image-uploader";
import NavHeader from "../../components/NavHeader";
import { connect } from "react-redux";
import api from "../../api/user";
// import api from "../../api/index";
const SetUser = (props: any) => {
  const { userData } = props;
  //   const [fileList, setFileList] = useState<ImageUploadItem[]>([
  //     {
  //       url: "",
  //     },
  //   ]);
  //   const mockUpload = (file: File): any => {
  //     console.log(URL.createObjectURL(file), file);
  //     // api
  //     //   .uploadImg({

  //     //   })
  //     //   .then((res: any) => {
  //     //     console.log(res);
  //     //   });
  //     return {
  //       url: URL.createObjectURL(file),
  //     };
  //   };
  const onFinish = (values: any) => {
    console.log(values);
    api.setUser({ ...values, id: userData.id }).then((res) => {
      if (res.status === 200) {
        props.history.goBack();
        Toast.show({
          content: "修改成功",
        });
      }
    });
  };
  return (
    <div>
      <NavHeader>个人资料</NavHeader> <div style={{ height: "40px" }}></div>
      <Form
        layout="horizontal"
        onFinish={onFinish}
        initialValues={props.userData}
        footer={
          <Button block type="submit" color="success">
            确认修改
          </Button>
        }
      >
        <Form.Item
          name="nickname"
          label="姓名"
          rules={[{ required: true, message: "姓名不能为空" }]}
        >
          <Input onChange={console.log} placeholder="请输入姓名" />
        </Form.Item>
        <Form.Item name="gender" label="性别">
          <Radio.Group value="gender">
            <Radio value="男">男</Radio>
            <Radio value="女">女</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="phone"
          label="电话"
          rules={[
            {
              message: "请输入正确的手机号",
              validateTrigger: "blur",
              pattern: /^1[3-9]\d{9}$/,
            },
          ]}
        >
          <Input onChange={console.log} placeholder="请输入电话" />
        </Form.Item>
        {/* <Form.Item name="file" label="头像">
          <ImageUploader
            value={fileList}
            onChange={setFileList}
            upload={mockUpload}
            multiple
            maxCount={1}
            showUpload={fileList.length < 2}
          />
        </Form.Item> */}
      </Form>
    </div>
  );
};
const mapStateToProps = (state: any) => {
  return state.user;
};
export default connect(mapStateToProps)(SetUser);
